<template>
	<view class="container">
		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
		<view class="body">
			<view class="header">
				<view class="row-one">
					<text>当 前 余 额</text>
					<text class="balance-detail">储值明细</text>
				</view>
				<view class="balance">{{balance}}元</view>
				<!-- <view>童家作（开发区店）</view> -->
			</view>

			<view class="recharge-plan-content" v-if="rechargePlanList.length != 0">
				<scroll-view scroll-x="true" enable-flex="true" class="recharge-plan-list">
<!-- 					<view
						class="recharge-plan-item"
						v-for="(rechargePlan, index) in rechargePlanList"
						:key="index"
						:class="active == index ? 'recharge-plan-item-active' : ''"
						@tap="selectPlan(index)"
					> -->
					<view
						class="recharge-plan-item"
						v-for="(rechargePlan, index) in rechargePlanList"
						:key="index"
					>
						<view>
							¥
							<text class="money">{{ rechargePlan.money }}</text>
						</view>
						<view class="gift-money">赠送{{ rechargePlan.giftMoney }}元</view>
					</view>
				</scroll-view>

				<view class="recharge-plan-detail">
					<view>
						<!-- <text class="iconfont icon-duihao icon-selected"></text>
						<text class="money-selected">充值{{ selectedPlan.money }}元</text> -->
						<input type="digit" v-model="inputValue" placeholder="请输入充值金额" />
					</view>
					<!-- <text>充值200元</text> -->
				</view>
			</view>

			<view style="height: 100rpx">
				<view class="submit-wrapper">
					<text class="submit" @tap="submitRecharge">立即充值</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { listRechargePlan,getUser, addRecharge, rechargeSuccess, rechargeFail } from '@/api/user';
import { mapGetters } from 'vuex';
export default {
	onShow() {
		this.getUser();
		this.getPlanList();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '自定义分享标题',
			path: '/pages/user/service/user_recharge/user_recharge'
		};
	},
	data() {
		return {
			config: {
				title: '账户充值'
			},
			active: 0,
			selectedPlan: {},
			rechargePlanList: [],
			balance:0,
			inputValue:undefined
		};
	},
	computed: {
		...mapGetters(['appId'])
	},
	methods: {
		handleInput(event) {
			let value = event.detail.value;  
			  // 允许为空字符串，允许为正数（包括小数）  
			  if (value === '' || /^(0|[1-9]\d*)(\.\d+)?$/.test(value)) {  
				// 如果是正数，则正常处理  
				// 这里可以添加你的逻辑，例如将值设置到data中的某个变量  
			  } else {  
				// 如果不是正数，则阻止输入  
				event.preventDefault();  
				// 这里可以选择将输入框的值重置为上一个合法的值  
			  }  
		    },
		getUser() {
			getUser().then((res) => {
				this.balance = res.data.balance;	
			});
		},
		getPlanList() {
			listRechargePlan().then((res) => {
				this.rechargePlanList = res.data;
				this.selectedPlan = this.rechargePlanList[0];
				console.log(this.rechargePlanList);
			});
		},
		selectPlan(index) {
			this.active = index;
			this.selectedPlan = this.rechargePlanList[index];
		},
		submitRecharge() {
			if(this.inputValue == 0 || this.inputValue == undefined){
				uni.showModal({
				    title: '提示',
				    content: '充值金额不能为空或0元',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				            // 用户点击了确定按钮的相关逻辑可以放在这里
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				            // 用户点击了取消按钮的相关逻辑可以放在这里
				        }
				    }
				});
				return
			}
			var recharge = undefined;
			this.rechargePlanList.forEach(item=>{
				console.log(item)
				if(this.inputValue >= item.money){
					recharge = {
						rechargeMode: 1,
						rechargePlanId: item.id,
						money: item.money,
						giftMoney: item.giftMoney
					};
				}
			})
			addRecharge(recharge, this.appId).then((res) => {
				if (res.code === 200) {
					this.handlePay(res.data);
					return;
				}
			});
		},
		handlePay(payInfo) {
			console.log(payInfo);
			uni.getProvider({
				service: 'payment',
				success: (res) => {
					console.log(res.provider);
					if (~res.provider.indexOf('wxpay')) {
						uni.requestPayment({
							provider: 'wxpay', //固定值为"wxpay"
							orderInfo: 'orderInfo',
							timeStamp: payInfo.timeStamp,
							nonceStr: payInfo.nonceStr,
							package: payInfo.package,
							signType: payInfo.signType,
							paySign: payInfo.paySign,

							success: async (res) => {
								// var rawdata = JSON.parse(res.rawdata);
								console.log('支付成功', res, payInfo.orderId);
								await rechargeSuccess(payInfo.orderId);
								this.getUser();
								this.getPlanList();
							},
							fail: function (err) {
								console.log('支付失败:' + JSON.stringify(err));
								// 正在支付中  ---> 待付款
								rechargeFail(payInfo.orderId);
								this.getUser();
								this.getPlanList();
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.body {
	padding: 20rpx 15rpx;
}

.header {
	display: flex;
	flex-direction: column;
	row-gap: 28rpx;
	padding: 35rpx 30rpx 20rpx;
	background-color: @theme-color;
	background-image: linear-gradient(to right top, #ff5a14, #ff9401);
	border-radius: 15rpx;
	color: #fff;
	font-size: 30rpx;

	.row-one {
		display: flex;
		justify-content: space-between;

		.balance-detail {
			background-color: #fff;
			color: @theme-color;
			padding: 10rpx 30rpx;
			border-radius: 50rpx;
		}
	}

	.balance {
		font-size: 45rpx;
		font-weight: bold;
	}
}

.recharge-plan-list {
	//white-space: nowrap;
	width: 100%;
	margin: 20rpx 0;

	.recharge-plan-item {
		display: inline-block;
		padding: 40rpx 20rpx;
		width: 228rpx;
		background-color: #fff;
		color: #252525;
		text-align: center;
		border-radius: 15rpx;

		.money {
			font-size: 45rpx;
			margin-left: 10rpx;
			font-weight: bold;
		}

		.gift-money {
			font-size: 25rpx;
			padding: 10rpx 0;
			border-top: 1rpx solid #252525;
		}
	}

	.recharge-plan-item-active {
		color: @theme-color;
		border: 1rpx solid @theme-color;

		.gift-money {
			border-top: 1rpx solid @theme-color;
		}
	}

	.recharge-plan-item{
		margin-top: 8rpx;
		margin-left: 10rpx;
	}
}

.recharge-plan-detail {
	background-color: #fff;
	padding: 30rpx 10rpx;

	.icon-selected {
		color: #fff;
		background-color: @theme-color;
		padding: 5rpx;
		font-size: 25rpx;
		border-radius: 50%;
	}

	.money-selected {
		color: @theme-color;
		font-size: 30rpx;
		margin-left: 10rpx;
	}
}

.submit-wrapper {
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 50rpx;
	padding: 0 10%;
	text-align: center;
	color: #fff;

	.submit {
		display: block;
		width: 100%;
		background-color: @theme-color;
		padding: 25rpx 0;
		border-radius: 100rpx;
	}
}
</style>
